<template>
  <div class="page_main">
    <LeiBreadCrumb :activePath="activePath"></LeiBreadCrumb>
    <el-card>
      <div class="nav">
        <div class="nav_left">
          <el-input
            placeholder="姓名/账号/手机号"
            prefix-icon="el-icon-search"
            v-model="keyword"
          >
          </el-input>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
          <el-button icon="el-icon-search">重置</el-button>
        </div>
        <div class="nav_right">
          <el-button type="primary" icon="el-icon-plus">新建部门</el-button>
          <el-button @click="unFoldAll">全部展开</el-button>
          <el-button @click="foldAll">全部折叠</el-button>
        </div>
      </div>
      <el-table
        v-if="isShowTable"
        :data="tableData"
        ref="multipleTable"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :default-expand-all="isExpend"
        :select-on-indeterminate="false"
        @select="select"
        @select-all="selectAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @sort-change="sortChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="date" label="日期" sortable width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
      <el-table
        v-if="isShowTable"
        :data="tableData"
        ref="multipleTable"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :default-expand-all="isExpend"
        :select-on-indeterminate="false"
        @select="select"
        @select-all="selectAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @sort-change="sortChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="date" label="日期" sortable width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
      <el-table
        v-if="isShowTable"
        :data="tableData"
        ref="multipleTable"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :default-expand-all="isExpend"
        :select-on-indeterminate="false"
        @select="select"
        @select-all="selectAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @sort-change="sortChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="date" label="日期" sortable width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
      <el-table
        v-if="isShowTable"
        :data="tableData"
        ref="multipleTable"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :default-expand-all="isExpend"
        :select-on-indeterminate="false"
        @select="select"
        @select-all="selectAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @sort-change="sortChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="date" label="日期" sortable width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>

      <div class="footer">
        <div class="footer_left">
          <el-button @click="selectChange(1)">选择全部</el-button>
          <el-button @click="selectChange(2)">反向选择</el-button>
          <el-select placeholder="更多操作" v-model="selectVal">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="footer_right">
          <el-pagination
            v-if="pageObj"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageObj.pageNum"
            :page-size="pageObj.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageObj.total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageObj: {
        pageNum: 1,
        pageSize: 10,
        total: 1,
      },
      activePath: {
        path: '',
        title: '平台管理',
      },
      keyword: '',
      isExpend: false,
      isShowTable: true,
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
          ],
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          children: [
            {
              id: 35,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              id: 36,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
          ],
        },
      ],

      multipleSelection: [],
      options: [
        { label: '操作一', value: 1 },
        { label: '操作一', value: 2 },
        { label: '操作一', value: 3 },
        { label: '操作一', value: 4 },
      ],
      selectVal: '',
    }
  },
  methods: {
    /**
     * 展开所有下级
     */
    expandAll() {
      // 获取点击的箭头元素
      let els = document.getElementsByClassName('el-table__expand-icon')
      for (let i = 0; i < els.length; i++) {
        els[i].click()
      }
    },
    /**
     * 展开所有下级
     */
    unFoldAll() {
      this.isShowTable = false
      this.$nextTick(() => {
        this.isShowTable = true
        window.setTimeout(() => {
          this.expandAll()
        }, 300)
      })
    },

    // 收起所有下级
    foldAll() {
      this.isShowTable = false
      this.$nextTick(function () {
        this.isShowTable = true
      })
    },

    handleSizeChange(val) {},

    handleCurrentChange(val) {},

    // 全选/反选
    selectChange(idx) {
      if (idx == 1) {
        this.tableData.forEach((item) => {
          this.$refs.multipleTable.toggleRowSelection(item, true)
          if (item.children) this.setChildren(item.children, true)
        })
      } else {
        this.tableData.forEach((item) => {
          this.$refs.multipleTable.toggleRowSelection(item)
          if (item.children) this.setChildren(item.children)
          // else this.$refs.multipleTable.toggleRowSelection(item)
        })
      }
    },

    sortChange(column) {},

    setChildren(children, type) {
      // 编辑多个子层级
      children.map((j) => {
        this.toggleSelection(j, type)
        if (j.children) {
          this.setChildren(j.children, type)
        }
      })
    },

    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.multipleTable &&
            this.$refs.multipleTable.toggleRowSelection(row, select)
        })
      }
    },
    // 选中父节点时，子节点一起选中取消
    select(selection, row) {
      console.log('aahfda', row)
      if (
        selection.some((el) => {
          return row.id === el.id
        })
      ) {
        if (row.children) {
          // row.childList.map(j => {
          //     this.toggleSelection(j, true)
          // })
          // 解决子组件没有被勾选到
          this.setChildren(row.children, true)
        }
      } else {
        if (row.children) {
          // row.childList.map(j => {
          //     this.toggleSelection(j, false)
          // })
          this.setChildren(row.children, false)
        }
      }
    },

    // 选择全部
    selectAll(selection) {
      // tabledata第一层只要有在selection里面就是全选
      const isSelect = selection.some((el) => {
        const tableDataIds = this.tableData.map((j) => j.id)
        return tableDataIds.includes(el.id)
      })
      // tableDate第一层只要有不在selection里面就是全不选
      const isCancel = !this.tableData.every((el) => {
        const selectIds = selection.map((j) => j.id)
        return selectIds.includes(el.id)
      })
      if (isSelect) {
        selection.map((el) => {
          if (el.children) {
            // 解决子组件没有被勾选到
            this.setChildren(el.children, true)
          }
        })
      }
      if (isCancel) {
        this.tableData.map((el) => {
          if (el.children) {
            // 解决子组件没有被勾选到
            this.setChildren(el.children, false)
          }
        })
      }
      console.log('this.tableData', this.tableData)
    },
  },
}
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  .nav_left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      width: 160px;
      margin-right: 10px;
    }
    .el-select {
      margin-right: 10px;
    }
  }
}

.footer {
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow-y: auto;
  overflow-x: hidden;
  .footer_left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    .el-button {
      margin-right: 10px;
    }
  }
}
</style>